// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root
  property var all_options: []
  property string skill_name: ""
  property string detail_content: ""
  property int result

  title.text: Backend.translate(prompt !== "" ? Util.processPrompt(skill_name) : "$Choice")
  width: 550
  height: human.height + title.height + decontent.height + 50

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 130
    width: parent.width - 10
    height: 90
    clip: true
    Text {
      id: detail
      width: parent.width
      height: parent.height
      text: luatr(detail_content)
      color: "white"
      wrapMode: Text.WordWrap
      font.pixelSize: 16
      textFormat: TextEdit.RichText
    }
  }

  GeneralCardItem {
    anchors.top:decontent.bottom
    anchors.topMargin: 10
    anchors.left:decontent.left
    anchors.leftMargin: 10
    id: human
    name: "caocao"
    visible: name !== ""
  }

  Flickable {
    id: choiceContainer
    // ScrollBar.horizontal: ScrollBar {}

    flickableDirection: Flickable.VerticalFlick
    width: 350
    height: 350
    // anchors.fill: parent
    anchors.top:decontent.bottom
    anchors.topMargin: 30
    anchors.left:human.right
    anchors.leftMargin: 60

    contentWidth: body.width
    contentHeight: body.height
    clip: true

    GridLayout {
      id: body
      x:2

      Layout.alignment: Qt.AlignHCenter
      flow: GridLayout.TopToBottom
      columns: 3
      rows: 3
      columnSpacing: 5
      rowSpacing: 5

      Repeater {
        model: all_options

        MetroButton {
          Layout.fillWidth: true
          // Layout.fillHeight: true
          // id: choicetitle
          // width: parent.width
          text: luatr(modelData)
          enabled: all_options.indexOf(modelData) !== -1
          textFont.pixelSize: 14

          onClicked: {
            root.close();
            ClientInstance.replyToServer("", JSON.stringify(modelData));           
          }
        }
      }
    }
  }

  function loadData(data) {
    console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    all_options = data[2];
    human.name = data[3];
  }
}
